<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form>
      <dropdown-normal v-model="commonAttr.name" :valLists="INPUT_TYPES" label="输入类型" :bIsBtn="false" @change="onChangeInputName" ></dropdown-normal>
      <input-normal  label="验证规则" v-model="commonAttr.rule" @change="onChangeAttr"></input-normal>
      <input-normal v-if="commonAttr.name != INPUT_TYPES_MAP.code" label="导出表头" v-model="commonAttr.tableName" @change="onChangeAttr"></input-normal>
      <input-normal v-if="commonAttr.name == INPUT_TYPES_MAP.fixed" label="固定信息" v-model="commonAttr.value" @change="onChangeAttr"></input-normal>
      <div v-if="commonAttr.name == INPUT_TYPES_MAP.weibo">
        <switch-normal v-model="commonAttr.isAuto" label="自动填充" @change="onChangeAttr"></switch-normal>
        <dropdown-normal v-model="commonAttr.userAttr" :valLists="INPUT_USER_TYPES" label="微博用户信息" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
      </div>
      <p v-else-if="commonAttr.name == INPUT_TYPES_MAP.code" class="margin-left-right-16 red">表单中有验证码，那么在类型为手机的组件中的”导出表头“中的文本需要包含手机，否则无法验证</p>
      <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <slider-normal v-model="commonAttr.limitTextNum" label="限制文本数量" :max="500" :step="1" @change="onChangeAttr"></slider-normal>
      <color-normal v-model="commonAttr.color" label="字体颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
      <input-normal v-model="commonAttr.placeholder" label="提示文本"  :unit="commonAttr.placeholder.length + '/12'" :maxLength="12" @change="onChangeAttr"></input-normal>
      <input-normal label="内距" placeholder="上 右 下 左" v-model="commonAttr.padding" @change="onChangeAttr"></input-normal>
      <dropdown-normal v-model="commonAttr.placeholerColor" label="提示文本颜色" :valLists="PLACEHOLDER_COLOR_TYPE"  @change="onChangeAttr"></dropdown-normal>
      <el-divider content-position="center">功能设置</el-divider>
      <switch-normal v-model="commonAttr.need" label="设为必填项" @change="onChangeAttr"></switch-normal>
      <switch-normal v-if="commonAttr.need" v-model="commonAttr.isShowNeed" label="显示必填项" @change="onChangeAttr"></switch-normal>
    </el-form>
  </right-template>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { INPUT_TYPES, INPUT_TYPES_MAP } from '@/const/web/'
import { PLACEHOLDER_COLOR_TYPE } from '@/const/'

const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
const onChangeInputName = () => {
  commonAttr_.tableName = ''
  commonAttr_.userAttr = ''
  onChangeAttr()
}
</script>